<template>
  <NoticeBar :scrollable="false"
    class="notice-bar">
    <span
      style="font-size: 12px;">请选择远端订单，订单选错损失将由您自己承担！</span>
  </NoticeBar>
  <div class="grid">
    <List>
      <Cell
        v-for="(option, index) in scope.options"
        :key="index"
        :class="['options', { active: selectedOptions.includes(option) }]"
        @click="handleSelect(option)"
        :title="option.orderNo" />
    </List>
  </div>
  <div
    class="footer van-hairline--top van-dialog__footer">
    <Button @click="props.hide" size="large"
      class="van-button van-button--default van-button--large van-dialog__cancel">取消</Button>
    <Button type="default" size="large" :class="[
      'van-button', 'van-button--default', 'van-button--large', 'van-dialog__confirm',
      'van-hairline--left'
    ]" @click="handleConfirm">确定</Button>
  </div>
</template>
<script setup lang="ts">
import {
  Button, Cell, List, NoticeBar,
} from 'vant';
import { type PropType, ref } from 'vue';

import type TransOrderItem from '../models/TransOrderItem';

const props = defineProps({
  scope: {
    type: Object as PropType<{
      options: TransOrderItem[]
      emit: (option: TransOrderItem[]) => void
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

const selectedOptions = ref<TransOrderItem[]>([]);
const handleSelect = (option: TransOrderItem) => {
  const index = selectedOptions.value.findIndex((o) => o.orderNo === option.orderNo);
  if (index !== -1) {
    selectedOptions.value.splice(index, 1);
  } else {
    selectedOptions.value.push(option);
  }
};

const handleConfirm = () => {
  props.scope.emit(selectedOptions.value);
  props.hide();
};
</script>
<style lang="less" scoped>
.grid {
  height: calc(145px * 3 + 20px);
  overflow-y: auto;

  .options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;

    position: relative;
    width: 100%;

    .rate {
      position: absolute;
      top: -16px;
      left: -8px;
    }

  }

  .active {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
}

.notice-bar {
  :deep(.van-notice-bar__wrap) {
    justify-content: center;
  }
}
</style>
